<template>
	<view class="bg_color">
		<view class="contract_title">您确认要解约《{{ruleForm.name}}》吗？</view>
		<view style="text-align: left;margin-top: 40rpx;">
			<radio-group @change="radioChange">
				<label class="uni-list-cell uni-list-cell-pd">
					<radio value="0" style="transform:scale(0.6)" :checked="bianhao === '0'" /><span
						class="radop_title">请选择解约原因</span>
					<view class="selectForm">
						<uni-data-select v-model="selectValue" :localdata="contractArr" :clear="false"
							style="width:360rpx;margin-left:20rpx;"></uni-data-select>
					</view>
				</label>
				<label class="uni-list-cell uni-list-cell-pd">
					<view style="margin-top: 20rpx;">
						<radio value="1" style="transform:scale(0.6)" :checked="bianhao === '1'" /><span
							class="radop_title">自定义解约协议（为保障解约文件符合法律法规，请勿修改合同签署方及合同基础信息。）</span>
					</view>
				</label>
			</radio-group>
		</view>
		<view style="margin-top: 20rpx;position: relative;">
			<view v-if="bianhao === '0'">
				<uni-notice-bar single color="#67C23A" background-color="#f0f9eb" text="简易解约内容由系统提供，仅支持选择解约原因" />
				<view class="xieyi">
					<uni-easyinput type="textarea" class="textarea_reason" v-html="disTxt"></uni-easyinput>
				</view>
			</view>
			<view v-if="bianhao === '1'">
				<uni-notice-bar single color="#67C23A" background-color="#f0f9eb" text="请修改自定义解约条款" />
				<view class="xieyi">
					<uni-easyinput type="textarea" class="textarea_reason" v-html="disTxt"></uni-easyinput>
				</view>
				<view class="xieyi">
					<uni-easyinput type="textarea" class="textarea_reason" style="height:270rpx"
						v-html="contractTxt"></uni-easyinput>
				</view>
			</view>
		</view>
		<!-- 页脚按钮 --> 
		<view class="dialog-footer">
			<button>预览解约协议</button>
			<button type="primary" @click="confirmSign">解约作废协议</button>
		</view>
	</view>
</template>

<script>
	import {getContract,getContractSignDetail,rescindContract} from "@/api/ec/work/contract/contract";
	import {
		contractSignAutoAdd,
		updateContractSignFlowStatus,
		warrantTemplateAndContractInfo
	} from "@/api/ec/work/contract/contractSign";
	export default {
		data() {
			return {
				contractTxt: "<span style=\"font-family: 宋体; line-height: 200%; letter-spacing: 0pt; font-size: 10.5pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;\">现因业务终止，经所有签署方友好协商后，一致同意解除原合同，原合同解除后，签署各方权利义务立即终止且不在任何争议，签署各方愿意承担由此产生的一切损失！</span><span style=\"font-family: 宋体; line-height: 200%; letter-spacing: 0pt; font-size: 10.5pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;\"><br /></span><span style=\"font-family: 宋体; line-height: 200%; letter-spacing: 0pt; font-size: 10.5pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;\">&nbsp;</span><span style=\"font-family: 宋体; line-height: 200%; letter-spacing: 0pt; font-size: 10.5pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;\">&nbsp;</span><span style=\"font-family: 宋体; line-height: 200%; letter-spacing: 0pt; font-size: 10.5pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;\">本协议所有签署方签字或盖章后立即生效。</span><span style=\"font-family: 宋体; line-height: 200%; letter-spacing: 0pt; font-size: 10.5pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;\"><br /></span><span style=\"font-family: 宋体; line-height: 200%; letter-spacing: 0pt; font-size: 10.5pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;\">&nbsp;</span><span style=\"font-family: 宋体; line-height: 200%; letter-spacing: 0pt; font-size: 10.5pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;\">&nbsp;</span>",
				disTxt: '',
				bianhao: '0',
				selectValue: 0, //解约
				ruleForm: '',
				items: [{
					value: 0,
					text: '请选择解约原因',
				}, {
					value: 1,
					text: '自定义解约协议'
				}],
				contractArr: [{
						value: 0,
						text: "业务终止",
					},
					{
						value: 1,
						text: "签约条款有误",
					},
					{
						value: 2,
						text: "印章选择错误",
					},
					{
						value: 3,
						text: "签署人信息错误",
					},
				],
				contractId: '',
				startFrom: {
					contractSignFlowStarter: {},
					contractSignFlowList: []
				}, //签署流程
				isType: '', // 判断身份信息 个人还是企业 true企业  false个人
			}
		},
		onLoad(option) {
			this.contractId = option.id
			this.isType = this.$store.getters.staffInfo.company //企业还是个人 true企业 false个人
			this.initData()
		},
		methods: {
			radioChange(e) {
				this.bianhao = e.detail.value
			},
			/** 签署作废协议 */
			confirmSign() {
				// let content = tinyMCE.activeEditor.getContent();
				let content = document.getElementsByClassName('textarea_reason')[0].innerHTML
				let contractSignFlow = {};
				contractSignFlow.transferFlag = 13; // 作废合同模板id
				contractSignFlow.systemStaffId = this.$store.getters.staffInfo.id;
				contractSignFlow.contractId = this.contractId; // 作废的合同id
				contractSignFlow.isStarter =1;
				//选择
				if (this.bianhao == 0) {
					contractSignFlow.contractFlowJson = content;
				}
				// 自定义
				if (this.bianhao == 1) {
					contractSignFlow.contractFlowJson = this.disTxtSub + content +
						"<br/><span style=\"mso-spacerun: 'yes'; font-family: 宋体; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;\">所有签署方签名或盖章区域： </span>";
				}
				if (this.isType) {
					contractSignFlow.signerType = 0;
					contractSignFlow.systemCompanyId = this.$store.getters.companyId;
				} else {
					contractSignFlow.signerType = 1;
				}
				this.$modal.loading();
				rescindContract({contractId:this.contractId,contractFlowJson:content}).then((response) => {
					//todo 修改原始合同为签署全通过-已解约 状态
					this.$modal.msgSuccess("指定签章位置！");
					setTimeout(() => {
						uni.hideLoading()
						uni.reLaunch({
							url:'./upSign?id='+response.data
						})
					}, 1000)
				})
			},
			initData() {
				// 初始合同信息
				getContract(this.contractId).then((response) => {
					this.ruleForm = response.data;
				});
				getContractSignDetail(this.contractId).then((response) => {
					this.startFrom = response.data;
				})
				// 根据合同id 和模板id 回显模板数据
				let contractSignFlow = {};
				contractSignFlow.transferFlag = 13; // 作废合同模板id
				console.log(this.$store.getters)
				contractSignFlow.systemStaffId = this.$store.getters.staffInfo.id;
				contractSignFlow.contractId = this.contractId; // 作废的合同id
				if (this.isType) {
					contractSignFlow.signerType = 0;
					contractSignFlow.systemCompanyId = this.$store.getters.companyId;
				} else {
					contractSignFlow.signerType = 1;
				}
				warrantTemplateAndContractInfo(contractSignFlow).then((response) => {
					this.disTxt = response.data.content;
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.textarea_reason {
		height: 820rpx;
		overflow-y: scroll;
	}

	::v-deep .uni-noticebar {
		margin-bottom: 0;
	}

	::v-deep .uni-data-checklist .checklist-group {
		display: block;
		line-height: 50rpx;
		margin-top: 30rpx;
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
		font-size: 28rpx;
	}

	/* radio 选中后的样式 */
	::v-deep uni-radio .uni-radio-input.uni-radio-input-checked {
		background-color: $uni-color-primary !important;
		border-color: $uni-color-primary !important;
		background-clip: content-box !important;
		padding: 6rpx !important;
		box-sizing: border-box;
	}

	/* radio 选中后的图标样式*/
	::v-deep uni-radio .uni-radio-input.uni-radio-input-checked::before {
		display: none !important;
	}

	page {
		background: $uni-bg-color;
	}

	.contract_title {
		font-size: 30rpx;
		text-align: center;
		font-weight: 500;
	}

	.radop_title {
		font-size: 28rpx;
	}

	.xieyi {
		background: #f4f4f5;
		padding: 32rpx;
		margin: 20rpx 0;
		font-size: 28rpx;
		color: #67C23A;
		background-color: #f0f9eb;

		.content {
			font-size: 26rpx;
			text-indent: 2em;
			color: #3f3f3f;
			margin-top: 20rpx;
			text-align: left; 
			word-break: break-all;
		}
	}

	.dialog-footer { 
		margin: 80rpx 0 20rpx;
		display: flex;

		button {
			width: 300rpx;
			font-size: 28rpx;
		}

		button:first-child {
			background: #fff;
			border: 1rpx solid #999999;

			&:hover {
				border-color: #b3e4cf
			}
		}

		button:last-child {
			border: 1rpx solid $uni-color-primary;
			background-color: $uni-color-primary;
			margin-left: 50rpx;
		}
	}

	.selectForm {
		font-size: 26rpx;
		text-align: left;
		display: flex;
		align-items: center;
		display: inline-block;
	}

	.bg_color {
		padding: 30rpx 50rpx 0 60rpx;
		display: inline-block;
		width: 100%;
		text-align: center;
		height: 100%;
	}
</style>